<template>
	<div class="aside-scroll">
		<el-menu :default-active="currenttag ? currenttag.id : '1'" class="el-menu-vertical-demo" background-color="#545c64"
			text-color="#fff"	active-text-color="#bed742" :collapse="isCollapse">
			<aside-menu-item :menus="menus" @toPage="toPage" v-if="menus.length > 0"></aside-menu-item>
		</el-menu>
	</div>
</template>

<script>
import AsideMenuItem from './AsideMenuItem.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'AsideMenu',
	components: {
		'aside-menu-item': AsideMenuItem
	},
	props: {
		menus: {
			type: Array,
			default: () => {}
		}
	},
	computed: {
		...mapState('pannel', ['isCollapse', 'currenttag'])
	},
	methods: {
		toPage(obj) {
			this.initTaglist(obj);
			this.$router.push({ name: obj.name });
		},
		...mapMutations('pannel', ['initTaglist'])
	}
}
</script>

<style lang="less" scoped>
  .aside-scroll {
    position: relative;
    overflow-x: hidden;
    width: 220px;
    height: calc(100% - 60px);
  }
	.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
	.el-menu-vertical-demo {
		height: 100%;
	}
</style>